<template>
  <p>
    翻转：
    <Switch v-model:value="flip"></Switch>
  </p>
  <Timeline alternate :flip="flip" style="max-width: 500px">
    <TimelineItem>
      <span style="margin-bottom: 10px">项目负责人</span>
      <Card> 今日客户提出了XXX的需求，请及时做技术可行性分析 </Card>
    </TimelineItem>
    <TimelineItem>
      <span style="margin-bottom: 10px">技术负责人</span>
      <Card> 经过会议讨论，XXX需求可以实现，请实施人员跟进 </Card>
    </TimelineItem>
    <TimelineItem>
      <span style="margin-bottom: 10px">技术骨干</span>
      <Card> 已收到开发需求，目前开发进度为30% </Card>
    </TimelineItem>
    <TimelineItem>
      <span style="margin-bottom: 10px">项目负责人</span>
      <Card> 请及时跟进XXX需求开发，目前客户对这块的进度提出了疑问 </Card>
    </TimelineItem>
    <TimelineItem>
      <span style="margin-bottom: 10px">技术负责人</span>
      <Card> 收到，已及时跟进开发情况，增加开发人员投入 </Card>
    </TimelineItem>
  </Timeline>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const flip = ref(false)
</script>
